<template>
	<el-card class="box-card">
		<el-steps :active="2" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="商户位置"></el-step>
		  <el-step title="联系方式"></el-step>
		  <el-step title="门头照"></el-step>
		  <el-step title="资质信息照片上传"></el-step>
		  <el-step title="资质信息"></el-step>
		  <el-step title="银行账号信息照片上传"></el-step>
		  <el-step title="银行账号信息"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData">
				<el-form-item class="title">
					<el-col :span="24">联系方式</el-col>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.linkerName" placeholder="请输入联系人" style="width:50%;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="formData.linkerPhone" placeholder="请输入联系手机" style="width:50%;"></el-input>
				</el-form-item>
				<el-form-item v-for="(domain, index) in domains" :key="domain.key" :rules="{required: true, message: '商户电话不能为空', trigger: 'blur'}">
					<el-input v-model="domain.value" placeholder="商户电话:带区号座机或手机"  style="width:50%;padding-left: 25px;"></el-input>
					<i class="el-icon-delete iconClass" @click.prevent="removeDomain(domain)" v-if="index != 0"></i>
					<i @click="addDomain" class="el-icon-circle-plus iconClass" v-if="index == 0"></i>
				</el-form-item>
			</el-form>
			
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { customerUpdate,customerInfo } from '@/api/getData'
	import { isPhoneVailable } from '@/config/mUtils'
	export default {
		data() {
			return {
				formData: {
					id: "",
					linkerName: "",
					linkerPhone: "",
					customerPhones: "",
					currentStep:"3",
				},
				domains: [{
					value: ''
				}],
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.customerInfo(this.formData.id);
			}
		},
		methods: {
			async customerInfo(id) {
				const res = await customerInfo({
					id: id,
				});
				if(res.code == "0") {
					this.formData.linkerName = res.obj.linkerName;
					this.formData.linkerPhone  = res.obj.linkerPhone;
					if(res.obj.customerPhones != null){
						this.formData.customerPhones  = res.obj.customerPhones;
						let customerPhones = this.formData.customerPhones.split(",");
						let domainInfos = [];
						customerPhones.forEach(function(item){
							let domain = {
								value:item
							}
							domainInfos.push(domain);
						});
						if(domainInfos.length > 0){
							this.domains = domainInfos;
						}
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			removeDomain(item) {
				var index = this.domains.indexOf(item)
				if(index !== -1) {
					this.domains.splice(index, 1)
				}
			},
			addDomain() {
				this.domains.push({
					value: '',
					key: Date.now()
				});
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(this.formData.linkerName == ""){
							this.$notify.error({
								title: '提示',
								message: "请输入联系人",
								offset: 100
							});
							return false;
						}
						if(this.formData.linkerPhone == ""){
							this.$notify.error({
								title: '提示',
								message: "请输入联系人手机号",
								offset: 100
							});
							return false;
						}else if(!isPhoneVailable(this.formData.linkerPhone)){
							this.$notify.error({
								title: '提示',
								message: "请输入正确手机号",
								offset: 100
							});
							return false;
						}
						let customerPhone = "";
						this.domains.forEach(function(domain){
							if(domain.value == ""){
								this.$notify.error({
									title: '提示',
									message: "请输入商户电话",
									offset: 100
								});
								return false;
							}else{
								customerPhone += domain.value + ",";
							}
						});
						
						this.formData.customerPhones = customerPhone.substring(0,customerPhone.length-1);
						let res = await customerUpdate(this.formData);

						if(res.code == "0") {
							this.$router.push({
								path: 'businessFour',
								query: {
									id: res.id
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width: 50%;
		margin: 10px auto;
	}
	
	.box-row {
		margin: 20px auto;
		width: 100%;
		text-align: center;
	}
	.iconClass{
		font-size: 24px;
		color:#66b1ff;
	}
</style>